<template>
  <div class="my">
    <my-header title="我的"></my-header>
    <div class="my-top">
      <div class="my-left">
        <span><img src="../assets/logo.png"></span>
      </div>
      <div class="my-center">
        <span>登陆/注册</span>
        <p>
          <span><img src="../assets/logo.png"></span>
          登录后享受更多特权
        </p>
      </div>
      <div class="my-right iconfont">
        &#xe64e;
      </div>
    </div>
    <div class="my-fl">
      <dl>
        <dt><img src="../assets/logo.png"></dt>
        <dd>红包</dd>
      </dl>
      <dl>
        <dt><img src="../assets/logo.png"></dt>
        <dd>金币</dd>
      </dl>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
    </div>
    <div class="fe">
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
      <div class="lexi">
        <span><img src="../assets/logo.png"></span>
        <span>我的地址</span>
        <span> > </span>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import myFooter from '@/components/myFooter'
export default {
  components: {
    myHeader,
    myFooter
  }
}
</script>

<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.my{
  .pxToRem(margin-top,88);
  .pxToRem(margin-bottom,104);
  .my-top{
    background: #009dff;
    box-sizing: border-box;
    .pxToRem(padding,30);
    display: flex;
    justify-content:center;
    align-items:center;
    color: #fff;
    .my-left{
      .pxToRem(width,120);
      .pxToRem(margin-right,20);
      img{
        width: 100%;
      }
    }
    .my-center{
      flex:1;
      flex-direction:column;
      display: flex;
      span{
        font-weight: bold;
        .pxToRem(font-size,40);
      }
      p{
        .pxToRem(margin-top,20);
        display: flex;
        align-items:center;
        span{
          .pxToRem(margin-right,10);
          .pxToRem(width,30);
          img{
            width: 100%;
          }
        }
      }
    }
    .my-right{
      .pxToRem(width,60);
      text-align: center;
      .pxToRem(font-size,26);
    }
  }
  .my-fl{
    width: 100%;
    display: flex;
    dl{
      flex:1;
      border-right:1px solid #ddd;
      display: flex;
      justify-content:center;
      flex-direction:column;
      align-items:center;
      padding: 2% 0;
      background: #fff;
      &:last-child{
        border:none;
      }
      dt{
        .pxToRem(width,60);
        img{
          width: 100%;
        }
      }
      dd{
        margin-top:2%; 
        color: #666;
        font-weight: bold;
      }
    }
  }
  .fe{
    .pxToRem(margin-top,20);
    background: #fff;
    .pxToRem(padding-left,20);
    .pxToRem(padding-right,20);
    .lexi{
      display: flex;
      justify-content:center;
      align-items:center;
      border-bottom: 1px solid #ddd;
      padding-top: 2%;
      padding-bottom: 2%;
      &:last-child{
        border-bottom:none;
      }
      span{
        &:nth-child(1){
          .pxToRem(margin-right,10);
          .pxToRem(width,60);
          img{
            width: 100%;
          }
        }
        &:nth-child(2){
          flex:1;
          .pxToRem(font-size,30);
          color: #333;
        }
        &:nth-child(3){
          .pxToRem(width,60);
          .pxToRem(font-size,30);
          text-align:center;
        }
      }
    }
  }
}

</style>
